<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
		<link rel="stylesheet" href="nav.css">
	</head>
	<body>
		<div id="pages">
			<ul id="side-menu">
				<li class="menu-unit" v-for="menu in menus">
					<a id="menu-url" v-bind:href="menu.url" v-bind:class="{ 'menu-active': menu.active && !menu.secondMenus}"
					 v-on:click="showToggle(menu)">
						<i v-bind:class="menu.icon"></i>
						<span>{{ menu.text }}</span>
						<i v-if="menu.downIcon" v-bind:class="menu.downIcon"></i>
					</a>
					<ul id="side-second-menu" v-if="menu.secondMenus && menu.active">
						<li v-for="secMenu in menu.secondMenus" v-on:click="showToggle(menu, secMenu)">
							<a v-bind:href="secMenu.url" rel="external nofollow" v-bind:class="{ 'menu-active': secMenu.active }">
								<span>{{ secMenu.text }}</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<script>
			var vm = new Vue({
				el: '#side-menu',
				data: {
					menus: [{
							text: '首页',
							icon: 'glyphicon glyphicon-apple',
							active: false
						},
						{
							text: '文档',
							
							icon: 'glyphicon glyphicon-book',
							active: false
						},
						{
							text: '引导页',
							
							icon: 'glyphicon glyphicon-send',
							active: false
						},
						{
							text: '权限测试页',
							icon: 'glyphicon glyphicon-lock',
							downIcon: 'glyphicon glyphicon-menu-down',
							active: false,
							secondMenus: [{
									text: '页面权限',
									url: '#',
									active: false
								},
								{
									text: '权限指令',
									url: '#',
									active: false
								},
							]
						},
						{
							text: '图标',
							icon: 'glyphicon glyphicon-pawn',
							active: false,
							
						},
					]
				},
				methods: {
					showToggle: function(menu, secMenu) {
						// 如果传入了二级菜单
						if (secMenu) {
							secMenu.active = true;
							// 更新menus数据
							this.refreshMenuTree(this.menus, menu, secMenu);
						} else {
							if (menu.secondMenus) {
								menu.active = !menu.active;
							} else {
								menu.active = true;
								// 更新menus数据
								this.refreshMenuTree(this.menus, menu, secMenu);
							}
						}
					},

					/**
					 * 整体逻辑即：menus中的数据项，进行遍历，如果不等于传入的menu或者secMenu则直接置为false
					 * @param menus 包含menu数据项的数组，如一级菜单数组，二级菜单数组
					 * @param menu 应该激活的一级菜单项
					 * @param secMenu 应该激活的二级菜单项
					 */
					refreshMenuTree(menus, menu, secMenu) {
						// 开始遍历
						menus.forEach(function(item) {
							// 如果菜单项不等于传入的一级菜单项或二级菜单项，则active置为false
							if (!(item === menu || item === secMenu || (item.secondMenus && item.active))) {
								item.active = false;
							}

							// 如果菜单项包含二级菜单列表，则遍历此列表
							if (item.secondMenus) {
								this.refreshMenuTree(item.secondMenus, menu, secMenu);
							}
							// 使用.bind(this)给函数的this绑定为外层的作用域，要不然this.refreshMenuTree方法取不到
						}.bind(this));
					},

				}
			})
		</script>
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

	</body>
</html>
